<template>
  <div>
    <el-form ref="sdkForm" :model="sdkForm" label-position="left"  label-width="120px">
      <div class="title">Android</div>
      <el-form-item label="推送方式：">
        <el-radio-group v-model.trim="sdkForm.androidpushsdk">
          <el-radio :label="true">云客服平台SDK推送</el-radio>
          <el-radio :label="false">推送地址</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="企业推送接收URL：" v-if="!sdkForm.androidpushsdk">
        <el-input v-model.trim="sdkForm.androidSyncAddress" placeholder="服务器地址，请以http或者https开头" size="mini" class="width-440"></el-input>
        <div class="width-440" style="line-height: 14px"><span class="prompt">温馨提示：APP接收离线消息的服务地址</span><span class="document-text">查看说明文档</span></div>
      </el-form-item>
      <div class="title" style="margin-top: 30px">iOS</div>
      <el-form-item label="推送方式：">
        <el-radio-group v-model.trim="sdkForm.isIospush">
          <el-radio :label="false">证书上传</el-radio>
          <el-radio :label="true">推送地址</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="!sdkForm.isIospush">
        <el-form-item label="APP名称：" prop="apnCert.appName" :rules="[
                { required: true, message: '必填', trigger: 'blur' }
              ]">
          <el-input type="text" v-model.trim="sdkForm.apnCert.appName" class="width-440"></el-input>
        </el-form-item>
        <el-form-item label="bundle ID：" prop="apnCert.bundleId" :rules="[
                { required: true, message: '必填', trigger: 'blur' }
              ]">
          <el-input type="text" v-model.trim="sdkForm.apnCert.bundleId" class="width-440"></el-input>
        </el-form-item>
        <el-form-item label="上传证书：">
          <el-upload
            class="temp-upload"
            :action="uploadUrl"
            accept=".p12"
            :limit="1"
            :data="uploadHeaders"
            :file-list="fileList"
            :with-credentials="true"
            :on-error="removeUploadList"
            :on-remove="removeUploadList"
            :on-success="uploaded"
            ref="upload"
            name="upload">
            <el-button class="small_btn">请选择证书</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="推送方式："  prop="apnCert.production">
          <el-radio-group v-model.trim="sdkForm.apnCert.production">
            <el-radio :label="true">线上环境</el-radio>
            <el-radio :label="false">测试环境</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="fileList.length" label="证书密码">
          <el-input type="text" v-model.trim="sdkForm.apnCert.passwd"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="企业推送接收url" v-show="sdkForm.isIospush">
        <el-input type="text" v-model.trim="sdkForm.iosSyncAddress" placeholder="服务器地址，请以http或者https开头" class="width-440"></el-input>
        <p style="font-size: 12px;">App接收离线消息的服务器地址。<a href="https://developer.7moor.com/online-service-kf02/" :class="{oem_7moor:$store.state.oemObj.oemFlag}" target="_blank">查看说明文档</a></p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'baseConfig',
    data () {
      return {
        fileList: [], // 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
        uploadUrl: '/fileUpload', // 必选参数，上传的地址
        uploadHeaders: { // 设置上传的请求头部
          type: 'undefined',
          module: '',
          sessionId: this.$store.state.session.sessionId
        },
        // sdk推送设置
        sdkForm: {
          androidpushsdk: false,
          androidSyncAddress: '',
          isIospush: true,
          apnCert: { // 新增 ios apn 推送
            appName: '', // app名称
            bundleId: '',
            filePath: '', // apn证书文件，上传证书时，填写上传文件接口返回的filepath信息
            fileName: '', // apn证书文件，上传证书时，填写上传文件接口返回的fileName信息
            production: true, // apn证书文件，上传证书时，指定是正式环境还是测试环境
            passwd: ''  // apn证书解密密码
          },
          iosSyncAddress: ''
        }
      }
    },
    props: {
      form: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    components: {
    },
    computed: {
    },
    methods: {
      open (val, isAdd) {
        if (isAdd) {
          this.newForm = {
            androidpushsdk: false,
            androidSyncAddress: '',
            isIospush: true,
            apnCert: { // 新增 ios apn 推送
              appName: '', // app名称
              bundleId: '',
              filePath: '', // apn证书文件，上传证书时，填写上传文件接口返回的filepath信息
              fileName: '', // apn证书文件，上传证书时，填写上传文件接口返回的fileName信息
              production: true, // apn证书文件，上传证书时，指定是正式环境还是测试环境
              passwd: ''  // apn证书解密密码
            },
            iosSyncAddress: ''
          }
        } else {
          for (let key in this.newForm) {
            this.newForm[key] = deepClone(val[key])
          }
        }
      },
      removeUploadList (file, fileList) {
        this.$refs.upload.clearFiles()
        this.sdkForm.apnCert.passwd = '' // 重置证书密码
        this.sdkForm.apnCert.filePath = ''
        this.sdkForm.apnCert.fileName = ''
        this.fileList.splice(this.fileList.findIndex(v => v.name === file.name), 1)
      },
      uploaded (response, file, fileList) {
        if (response && response.filePath) {
          let fileName = /[^.]+$/.exec(response.fileName)
          if (fileName) {
            if (file.size <= 0) {
              this.$message.error('上传文件不能为空')
              this.$refs.upload.clearFiles()
              return false
            }
            this.sdkForm.apnCert.filePath = response.filePath
            this.sdkForm.apnCert.fileName = response.fileName
            this.fileList.push({ name: response.fileName, url: response.filePath })
          } else {
            this.$message.error(this.$t('sms.uploadFileWrong'))
            this.$refs.upload.clearFiles()
            return false
          }
        } else {
          this.$message.error('上传失败！')
          this.$refs.upload.clearFiles()
          return false
        }
      }
    },
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .margin-l-10
    margin-left 10px
  .width-440
    width 440px
  .prompt
    color $c-prompt
    line-height normal
    font-size 12px
  .sdk-form
    .title
      font-weight bold
    .document-text
      color #459AE9
      float right
      font-size 12px
      cursor pointer
</style>
